<template>
  <div class="Organization">
    <div class="infoBlock">
      <div class="card">
        <img src="@as/img/wode_guoqi.png" alt="" class="guoqi">
        <div class="content">
          <p><img src="@as/img/wode_danghui.png" alt="" class="danghui"></p>
          <p class="orgName">{{org_info.name}}</p>
          <p class="parentOrgName">上级组织：{{org_info.parnet_org}}</p>
          <div class="other">
            <div class="day">
              <p class="num">{{org_info.regtime}}天</p>
              <p class="name">成立天数</p>
            </div>
            <!-- <img src="@as/img/wode_border.png" alt="" class="border"> -->
            <div class="border"></div>
            <div class="date">
              <p class="num">{{org_info.general}}</p>
              <p class="name">换届时间</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <ul>
      <li v-for="(item, index) in class_org" :key="index">
        <p>
          <span>{{item.party_posts}}：</span>
          <span>{{item.name}}</span>
        </p>
        <img :src=item.photo||defaultAvatar alt="">
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      org_info: {},
      class_org: [],
      defaultAvatar:'https://media.71ydj.com/FvSE_SRijRPJ-Qkti8sHfYr1W9zH#'
    };
  },
  created(){
    this.getOrgInfo()
  },
  mounted() {
  },
  methods: {
    async getOrgInfo(){
      try {
        let params = {
          org_id: JSON.parse(Cookies.get('user_71ydj')).organization_id
        }
        const url = `app/my/org_info`
        let res = await this.$http.get(url, params)
        this.$progress.done()
        if(res.code === 200){
          this.org_info = res.data.org_info
          this.class_org = res.data.class_org
          console.log(this.data)
        }
      } catch(e) {
        console.log('​catch -> e', e)
      }
    }
  }
};
</script>

<style scoped lang="scss">
.Organization{
  height: 100vh;
}
.infoBlock{
  position: relative;
  width: 100%;
  height: 232px;
  background: url(../../../../assets/img/wode_bg.png) center no-repeat;
  background-size: 100% 100%;
  box-sizing: border-box;
  padding-top: 50px;
  margin-bottom: 74px;
  .card{
    overflow: hidden;
    position: relative;
    width: calc(100% - 46px);
    height:215px;
    background:rgba(255,255,255,1);
    box-shadow:3px 3px 10px 0px rgba(51,51,51,0.08);
    border-radius:6px;
    margin: 0 auto;
    .guoqi{
      position: absolute;
      top: 0;
      left: 0;
      width: 140px;
      height: 102px;
    }
    .content{
      text-align: center;
      padding-top: 11px;
      img{
        display: block;
        margin: 0 auto;
      }
      .danghui{
        width: 75px;
        height: 67px;
        margin-bottom: 15px;
      }
      .orgName{
        font-size:15px;
        line-height: 15px;
        font-family:PingFang-SC-Bold;
        font-weight:bold;
        color:rgba(51,51,51,1);
        margin-bottom: 11px;
      }
      .parentOrgName{
        font-size:12px;
        line-height: 12px;
        font-family:PingFang-SC-Regular;
        font-weight:400;
        color:rgba(153,153,153,1);
        margin-bottom: 26px;
      }
      .other{
        display: flex;
        .day,.date{
          flex:.5;
        }
        .border{
          width:1px;
          height:34px;
          background:linear-gradient(0deg,rgba(225,119,109,1),rgba(235,77,68,1),rgba(244,117,72,1));
          opacity:0.6;
        }
        .num{
          text-align: center;
          font-size:14px;
          line-height: 14px;
          font-family:PingFang-SC-Regular;
          font-weight:400;
          color:rgba(51,51,51,1);
          margin-bottom: 10px;
        }
        .name{
          text-align: center;
          font-size:12px;
          line-height: 12px;
          font-family:PingFang-SC-Regular;
          font-weight:400;
          color:rgba(153,153,153,1);
        }
      }
    }
  }
}
ul{
  box-sizing: border-box;
  padding: 0 23px;
  li{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 32px;
    font-size:14px;
    font-family:PingFang-SC-Medium;
    font-weight:500;
    margin-bottom: 22px;
    img{
      width:32px;
      height:32px;
      border-radius:50%;
    }
    span{
      flex:1;
      &:first-child{
        color:rgba(102,102,102,1);
      }
      &:last-child{
        color:rgba(51,51,51,1);
      }
    }
  }
}
</style>